<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				background-image: url(img/bg.jpg);
				background-size: 100% 100%;
				text-align: center;
				min-width: 500px;
			}
			#ts{
				border: 2px solid saddlebrown;
				width: 300px;
			}
			#main {
				margin: 0px auto;
				width: 500px;
				height: 500px;
				border: 1px solid ;
				box-sizing: border-box;
			}
			
			#main div {
				float: left;
				border: 1px solid;
				box-sizing: border-box;
				background-image: url(img/拼图1.jpg);
				background-size: 500px;
			}
			#success{
				padding-top: 100px;
				padding-left: 20px;
				font-family: "隶书";
				font-weight:bold ;
				font-size: 40px;
				width: 400px;
				height: 250px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -135px;
				margin-left: -200px;
				background-image: url(img/success.png);
			    background-size: 100% 100%;
			    display: none;
			}
		</style>
	</head>

	<body>
		<audio id="mp3" src="img/罗艺恒 - 青花瓷.mp3"></audio>
	    <div id="success">
	    	<span style="display: block;">恭喜过关！</span><br />
	    	<span style="border: 2px solid brown;margin-left: -20px;margin-top: 50px;" onclick="success()">下一关</span>
	    </div>
		<img id="ts" src="img/拼图1.jpg" />
		<div id="main">
		</div><br />
		<div id="nandu">
			难度：<select id="sel" onchange="nandu()">
			<option>3</option>
			<option>5</option>
			<option>7</option>
			<option>9</option>
		</select>
		</div>
	</body>
	<script>
		document.getElementById("mp3").play();
		var tu=1;
		var main = document.getElementById("main");
		var num = 3;
		var zbarr = []; //存入正确坐标
		var sjarr = []; //随机打乱坐标
		var startdiv;
		var enddiv;
		creatediv();

		function creatediv() {
			document.getElementById("ts").src="img/拼图"+tu+".jpg";
			for(var i = 0; i < Math.pow(num, 2); i++) {
				var div = document.createElement("div");
				div.style.width = (100 / num) + "%";
				div.style.height = (100 / num) + "%";
				div.draggable = "true";
				div.style.backgroundImage="url(img/拼图"+tu+".jpg)";
				div.ondragstart = function(e) {
					startdiv = e.target;
					e.dataTransfer.setData("text",e.target);//解决火狐兼容问题，激活dataTransfer属性
				}
				div.ondragenter = function() {
					return false;
				}
				div.ondragover = function() {
					return false;
				}
				div.ondrop = function(e) {
					e.preventDefault();
					e.stopPropagation();//不加会打开新网页
					enddiv = e.target;
					var startp = startdiv.style.backgroundPosition;
					var endp = enddiv.style.backgroundPosition;
					startdiv.style.backgroundPosition = endp;
					enddiv.style.backgroundPosition = startp;
					yz();
				}
				main.appendChild(div);
			}
			setzb();
			suiji();
		}

		function suiji() {
			sjarr = sjarr.sort(function(x, y) {
				return Math.random() > 0.5 ? 1 : -1
			})
			var divs = document.querySelectorAll("#main div");
			for(var f = 0; f < Math.pow(num, 2); f++) {
				divs[f].style.backgroundPosition = sjarr[f];
			}
		}

		function setzb() {
			var c = 0;
			for(var a = 0; a < num; a++) {
				for(var b = 0; b < num; b++) {
					zbarr.push(parseInt((b * (-(500 / num)))*100)/100 + "px " + parseInt((a * (-(500 / num)))*100)/100 + "px");
					sjarr.push(parseInt((b * (-(500 / num)))*100)/100 + "px " + parseInt((a * (-(500 / num)))*100)/100 + "px");
				}
			}
		}

		function yz() {
			var divs = document.querySelectorAll("#main div");
			var e = 0;
			for(var d = 0; d < divs.length; d++) {
				if(divs[d].style.backgroundPosition == zbarr[d]) {
					e++;
				}
			}
			if(e == Math.pow(num, 2)) {				
				document.getElementById("success").style.display="block";
			}
		}
		function success(){
			zbarr = [];
		    sjarr = [];
			document.getElementById("success").style.display="none";
			document.getElementById("main").innerHTML="";
			num++;
			tu=(tu==5)?1:tu+1;
			creatediv();
//			document.getElementById("ts").src="img/拼图"+tu+".jpg";
			/*var divs = document.querySelectorAll("#main div");
			for (var g=0;g<divs.length;g++) {
				divs[g].style.backgroundImage="url(img/拼图"+tu+".jpg)";
			}*/
		}
		function nandu(){
			zbarr = [];
		    sjarr = [];
			num=document.getElementById("sel").value;
			document.getElementById("main").innerHTML="";
			creatediv();
		}
	</script>

</html>